<template>
  <div style="margin:20px;">
    <div style="margin-bottom:20px;" >
      <el-button type="primary" @click="handleShowAddChapterDialog">添加章节</el-button>
    </div>

    <!-- 章节列表 -->
    <ul class="chapterList">
      <li
        v-for="chapter in chapters"
        :key="chapter.id">
        <p>
          {{ chapter.title }}
          <span class="acts">
            <el-button type="text" @click="hanldeShowEditVideoDialog(chapter)">添加课时</el-button>
            <el-button type="text" @click="handleShowEditDialogChapter(chapter)">编辑</el-button>
            <el-button type="text" @click="handleDelChapter(chapter)">删除</el-button>
          </span>
        </p>
        <!-- 视频 -->
        <ul class="chapterList videoList">
          <li
            v-for="video in chapter.videos"
            :key="video.id">
            <p v-if="video.id">
              {{ video.title }}
              <el-tag v-if="!video.videoSourceId" size="mini" type="danger">
                {{ '尚未上传视频' }}
              </el-tag>
              <!-- <el-tag v-else="video.videoSourceId" size="mini" type="danger">
                {{ video.videoSourceId }}
              </el-tag> -->
              <span class="acts">
                <el-tag v-if="video.free" size="mini" type="success">{{ '免费观看' }}</el-tag>
                <el-button type="text" @click="handleShowEditVideoDialog(video)">编辑</el-button>
                <el-button type="text" @click="handleDelVideo(video)">删除</el-button>
              </span>
            </p>
          </li>
        </ul>
      </li>
    </ul>

    <div style="text-align:center">
      <el-button type="primary" @click="handlePrev">上一步</el-button>
      <el-button type="primary" @click="handleNext">下一步</el-button>
    </div>

    <el-dialog :visible.sync="dialogFormVisible" :title="title">
      <el-form>
        <el-form-item :label-width="formLabelWidth" label="章节标题">
          <el-input v-model="chapter.title" auto-complete="true"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="章节排序">
          <el-input-number v-model="chapter.sort" :min="0" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveOrUpdateChapter">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 课时对话框 -->
    <video-dialog ref="videoDialog"/>
  </div>
</template>
<script>
import chapterApi from '@/api/chapter'
import videoApi from '@/api/video'
import videoDialog from './videoDialog.vue'
export default {
  components: {
    videoDialog
  },
  data() {
    return {
      chapters: [],
      chapter: { sort: 0 },
      formLabelWidth: '120px',
      title: '新增章节',
      dialogFormVisible: false
    }
  },
  created() {
    this.getChaptersAndVideos()
  },
  methods: {
    // 编辑课时按钮单击事件
    handleShowEditVideoDialog(video) {
      this.$refs.videoDialog.title = '更新课时'
      this.$refs.videoDialog.getVideo(video.id)
    },
    // 删除课时按钮单击事件
    handleDelVideo(video) {
      this.$confirm(`此操作将永久删除小节: ${video.title}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        videoApi.deleteById(video.id).then(r => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getChaptersAndVideos()// 刷新页面数据
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 新增课时按钮单击事件
    hanldeShowEditVideoDialog(chapter) {
      this.$refs.videoDialog.title = '添加课时'
      // 将章节课程的id设置给课时对象：
      this.$refs.videoDialog.video = {
        free: 0,
        sort: 0,
        chapterId: chapter.id,
        courseId: this.$parent.courseId
      }
      // 查找页面中的video对话框标签
      this.$refs.videoDialog.dialogFormVisible = true
    },
    // 章节列表的按钮组事件函数
    handleShowEditDialogChapter(chapter) {
      // 回显要更新的章节数据
      this.title = '更新章节'
      chapterApi.getById(chapter.id).then(r => {
        this.chapter = r.data.item
        // 显示对话框
        this.dialogFormVisible = true
      })
    },
    handleDelChapter(chapter) {
      if (chapter.videos && chapter.videos.length > 0) {
        this.$message({
          type: 'warning',
          message: '该章节存在课时!'
        })
        return
      }

      this.$confirm(`此操作将永久删除章: ${chapter.title}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        chapterApi.deleteById(chapter.id).then(r => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getChaptersAndVideos()// 刷新页面数据
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 查询章节嵌套集合的函数
    getChaptersAndVideos() {
      chapterApi.getChaptersAndVideos(this.$parent.courseId).then(r => {
        this.chapters = r.data.items
        console.log(r.data.item)
      })
    },
    // 新增或者更新章节对话框按钮的单击事件函数
    handleSaveOrUpdateChapter() {
      if (this.chapter.id) { // 一定是编辑时查询到的chapter对象 包含id属性值
        this.update()
      } else {
        this.save()
      }
    },
    update() {
      chapterApi.updateById(this.chapter).then(r => {
        this.$message.success('更新章成功')
        this.dialogFormVisible = false // 关闭对话框
        // 刷新页面：TODO
        this.getChaptersAndVideos()
      })
    },
    // 新增章节对话框提交按钮单击事件
    save() {
      // 提交新增请求前 将课程id设置给chapter
      this.chapter.courseId = this.$parent.courseId
      chapterApi.save(this.chapter).then(r => {
        this.$message.success('新增章成功')
        this.dialogFormVisible = false // 关闭对话框
        // 刷新页面：TODO
        this.getChaptersAndVideos()
      })
    },
    // 添加章节按钮单击事件函数
    handleShowAddChapterDialog() {
      this.title = '新增章节'
      this.chapter = { sort: 0 }
      this.dialogFormVisible = true
    },
    handlePrev() {
      this.$parent.active = 0
    },
    handleNext() {
      this.$parent.active = 2
    }
  }
}
</script>
<style>
.chapterList{
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.chapterList li{
  position: relative;
}
.chapterList p{
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #DDD;
}
.chapterList .acts {
    float: right;
    font-size: 14px;
}

.videoList{
  padding-left: 50px;
}
.videoList p{
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dashed #DDD;
}
</style>
